<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="bos">
		<ul>
			<li v-for="ac in vla"><input type="checkbox" :value='ac.id' v-model='checkboxtrue'> {{ac.name}}</li>
		</ul>
		<button @click='quanXuan()'>全选</button> 
		<button @click='fanXuan()'>反选</button>
		<button @click='quanBuXuan()'>全不选</button>
	</div>
	<script src="vue.js"></script>
	<script>
	new Vue({
		el:'#bos',
		data:{
         vla:[
           {id:1,name:'aaaa'},
           {id:2,name:'bbbb'},
           {id:3,name:'cccc'},
           {id:4,name:'sddd'},
         ],
         checkboxtrue:[]
		},
		methods:{
			quanXuan(){
				 let str = []
				this.vla.forEach(element =>{
					console.log(element)
					str.push(element.id) 
				})
				this.checkboxtrue = str
			// this.checkboxtrue=true
		
			},
			fanXuan(){
				 let str = []
				this.vla.forEach(element =>{
					str.push(element.id) 
				})

				let stt = []
				str.forEach((ac)=>{
					if(this.checkboxtrue.indexOf(ac) === -1){
						stt.push(ac)
					}
				})

				this.checkboxtrue = stt
			
			},
			quanBuXuan(){
				this.checkboxtrue = []
			}
		}
	})
	</script>
	 <script>

        Vue.component('my-child',{
            template:'#child',
            props:['func'],
            data(){
                return {
                    str:'我是子组件的数据'
                }
            },
            methods:{
                demo(){
                   
                    this.$emit('func',this.str)
                }
            }
        })


        
        const vm = new Vue({
           el:'#app',
           data:{
             title:"子组件给父组件传递数据  -- 事件传递",
             parent:'我是父级的数据：'
           },
           methods:{
               parentData(str){
                    this.parent = str;
               }
           }
        });
    </script>
</body>
</html>